<template>
  <sideslip ref="sideslip">
    <div class="pb20">
      <tabs :value="active" :data="['备选库','所有可上大学']" @event = "bindTabs"></tabs>
    </div>
    <div v-show="active == 1">
      <screen :no="[3]" @screenClick="bindScreen"></screen>
    </div>
    <div v-if="list.length > 0">
      <table cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <th class="name">大学名称</th>
            <th class="probability">录取概率</th>
            <th class="plan">招生计划</th>
            <th></th>
          </tr>
          <tr v-for="(item, index) in list" :key="index">
            <td class="name">{{item.collegeName}}</td>
            <td class="probability">
              <span :class="'active block-tag--'+item.chongShouBao.id">{{item.chongShouBao.name}}{{item.probability || '-'}}%</span>
            </td>
            <td class="plan"><i class="c-blue">{{item.studentPlan||'-'}}</i>人</td>
            <td class="operation">
              <div v-if="!item.choose" @click="add(item);item.choose = !item.choose">添加</div>
              <div class="c-ad" v-else>已添加</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <no-content v-else :text="text"></no-content>
    <paginate v-show="totalElements>15" :total="totalElements" :current-page="page" @pagechange="pagechange"></paginate>
  </sideslip>
</template>
<script>
import { api } from '@/utils'
import tabs from '~/components/slot/tabs'
import sideslip from '~/components/animation/sideslip'
import _ from 'lodash'
const COMPONENTS = {
  tabs,
  sideslip
}
export default{
  components: COMPONENTS,
  data () {
    return {
      list: '',
      active: 0,
      params: {
        page: 0,
        size: 15
      },
      enrollBatch: '',
      number: '',
      totalElements: 0,
      page: 1,
      text: '加载中...'
    }
  },
  methods: {
    bindTabs (msg) {
      this.active = msg
      this.list = []
      this.totalElements = 0
      this.page = 1
      this.params.page = 0
      this.text = '加载中...'
      if (msg === 0) {
        this.getCollege()
      } else {
        this.params.sortRule = 0
        this.getAllCollege()
      }
    },
    // 筛选
    bindScreen (data) {
      for (let index in data) {
        this.params[index] = data[index]
      }
      this.params.page = 0
      this.page = 1
      this.getAllCollege()
    },
    submitdata (msg) {
      this.reset()
      this.active = 0
      // 打开弹窗
      this.$refs.sideslip.$emit('event')
      console.log(111)
      // this.data = msg.data
      this.enrollBatch = msg.enrollBatch
      this.number = msg.number
      this.getCollege()
    },
    // 备选库 api.getFirstCollege,
    getCollege () {
      let _params = this.params
      _params.batchId = this.enrollBatch

      this.$axios.get(api.getFirstCollege, { params: _params }).then(data => {
        if (data && data.content.length) {
          this.list = data.content
          this.totalElements = data.totalElements
        } else {
          this.list = []
          this.text = '暂无数据'
        }
      }).catch(data => {
        this.list = []
        this.text = '网络走丢了，请稍后重试！'
      })
    },
    // 全部大学 api.queryAllFirstCollege
    getAllCollege () {
      let _params = this.params
      _params.batchIds = this.enrollBatch

      this.$axios.get(api.queryAllFirstCollege, { params: _params }).then(data => {
        if (!_.isEmpty(data)) {
          if (data.content.length > 0) {
            this.list = data.content
            this.totalElements = data.totalElements
          } else {
            this.text = '暂无数据'
            this.reset()
          }
        } else {
          this.text = '暂无数据'
          this.reset()
        }
      }).catch(err => {
        console.log(err)
        this.text = '网络走丢了，请稍后重试！'
        this.reset()
      })
    },
    add (item) {
      let _data = {
        enrollBatch: {id: this.enrollBatch},
        probability: item.probability,
        number: this.number,
        college: {id: item.id},
        chongShouBao: item.chongShouBao.id
      }

      this.$axios.post(api.setWishCollege, _data).then(data => {
        // 添加后关闭选择窗口
        this.$refs.sideslip.$emit('event', false)
        // 刷新数据
        this.$emit('bindevent')
      }).catch(data => {
        // this.$toast('网络走丢了，请稍后重试！')
      })
      // return true
    },
    pagechange (currentPage) {
      this.page = currentPage
      this.params.page = currentPage - 1
      if (this.active === 0) {
        this.getCollege()
      } else {
        this.getAllCollege()
      }
    },
    reset () {
      this.params.page = 0
      this.list = []
      this.totalElements = 0
      this.page = 1
    }
  },
  mounted: function () {
    // this.$on('event', function (msg) {
    //   console.log('监听成功', msg)
    // })
  }
}
</script>
<style lang="scss" scoped>
  /deep/ .el-tabs__nav-scroll{
    padding:0 10px !important;
    .el-tabs__active-bar{
      width:48px;
    }
  }
  table{
    margin-top:0px !important;
    border:none !important;
    width:100%;
    tr{
      font-size:16px;
      th,td{
        font-weight:normal;
        border-top:none !important;
        border-bottom: 1px solid #E6E6E6;
        background-color: transparent !important;
      }
      th{
        color:#69707F;
        padding:20px 0px 12px !important;
      }
      td{
        padding: 12px 0px !important;
        color:#333;
      }
      .name{
        text-align:left;
        width:50%;
        padding-left:10px !important;
        @extend .ell;
      }
      .probability{
        width:20%;
      }
      .plan{
        width:20%
      }
      .operation{
        width:10%;
        text-align:right;
        padding-right:10px !important;
        cursor:pointer;
        color: $positive;
      }
    }
  }
</style>
